<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>初识vue</title>
</head>
<body>
  <!-- 
    MVVM 
      M(Model):模型 data中的数据
      V(View):视图 模板代码
      VM(ViewModel)
      
      data 上的所有数据,最后都出现在了vm对象上
      vm上的所有属性,及vue原型上的所有属性在vue模板中都可以直接使用

   -->
  <div id = 'root'>
    <h1> hello, {{ name }} </h1>
    <h1> {{ addr }} </h1>
  </div>

  <script type="text/javascript" src="../js/vue.js"></script>
<script>
  // 设置为 false 以阻止 vue 在启动时生成生产提示。
  Vue.config.productionTip = false
  // 创建一个vue实例
  const vm = new Vue({
    // el -> element 用于指定当前vue对象绑定哪个容器,值通常为css选择器字符串
    el: '#root',
    // data 用于存储数组,数据供el所指定的容器去使用 
    data() {
     return {
      name: '海绵宝宝',
      addr: '蚌埠'
     } 
    }
  }); 
  console.log(vm);
</script>
</body>
</html>